<template>
    <h2 style="text-align: center;">病房信息添加</h2>
    <table border="1" class="table table-bordered">
        <tbody>
            <tr>
                <th>病房名称</th>
                <th>
                    <input type="text" placeholder="请输入病房名称" v-model="Info.Ward_Name"/>
                </th>
            </tr>

            <tr>
                <th>病房数量</th>
                <th>
                    <input type="text" placeholder="请输入病房数量" v-model="Info.Ward_Num"/>
                </th>
            </tr>

            <tr>
                <th>剩余数量</th>
                <th>
                    <input type="text" placeholder="请输入剩余数量" v-model="Info.Ward_SumNum" />
                </th>
            </tr>


            <tr>
                <th>病房状态</th>
                <th>
                    <input type="radio" :value="true" checked v-model="Info.Ward_State"/>启用
                    <input type="radio" :value="false"  v-model="Info.Ward_State"/>维修
                </th>
            </tr>

            <tr>
                <th>所属科室</th>
                <th>
                    <select v-model="Info.Dept_Id" >
                        <option :value="-1">请选择</option>
                        <option v-for="item in InfoDept" :value="item.Dept_Id">{{ item.Dept_Name }}</option>
                    </select>
                </th>
            </tr>

            <tr>
                <th colspan="2" style="text-align: center;">
                    <input type="button" value="添加病房信息" class="btn btn-success" @click="AddWard" style="margin-right: 10px;" />
                    <a href="/ShowWard">返回列表</a>
                </th>
            </tr>
        </tbody>
    </table>
</template>



<script setup lang="ts">
    import {ref,onMounted}from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';

    const router=useRouter();
    //添加响应式数据
    const Info=ref({
        Ward_Name: "",
        Ward_Num: "",
        Ward_SumNum: "",
        Ward_State: true,
        Dept_Id: -1
    })
    //获取科室响应式数据
    const InfoDept=ref([{
        Dept_Id:0,
        Dept_Name:""
    }])
    //文档就绪函数
    onMounted(()=>{
        GetDepartments();//获取科室信息
    })
    //获取科室信息
    const GetDepartments=()=>{
        axios.get("https://localhost:44306/api/Ward/GetDepartments")
        .then(res=>{
            InfoDept.value=res.data
        })
    }
    //添加
    const AddWard=()=>{
        //验证
        if(Info.value.Ward_Name=="")
        {
            alert('病房名称不能为空');
            return;
        }
        if(Info.value.Ward_Num=="")
        {
            alert('病房数量不能为空');
            return;
        }
        if(Info.value.Ward_SumNum=="")
        {
            alert('病房剩余数量不能为空');
        }
        //病房名称不能超过6个字符
        if(Info.value.Ward_Name.length>6)
        {
            alert('病房名称不能超过6个字符');
        }
        axios.post("https://localhost:44306/api/Ward/AddWard",Info.value)
        .then(res=>{
            if(res.data==-1)
            {
                alert('改名称已存在');
                return;
            }
            else if(res.data>0)
            {
                alert('病房信息添加成功');
                router.push("/ShowWard");//跳转到显示页面
            }
            else
            {
                alert('病房信息添加失败');
            }
        })
    }
</script>